// 子组件childA
 
<template>
  <div id="childA">
    <h1>我是A组件</h1>
    <Button type="primary" @click="transform">点我让B组件接收到数据</Button>
    <p>因为你点了B，所以我的信息发生了变化：</p>
    <P>{{BMessage}}</P>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      AMessage: "Hello，B组件，我是A组件的信息"
    };
  },
  computed: {
    BMessage() {
      // 这里存储从store里获取的B组件的数据
      return this.$store.state.BMsg;
    }
  },
  methods: {
    transform() {
      // 触发receiveAMsg，将A组件的数据存放到store里去
      this.$store.commit("receiveAMsg", {
        AMsg: this.AMessage
      });
    }
  }
};
</script>
<style scoped>
p {
  margin-top: 8px;
  font-size: 16px;
}
</style>